<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'

//语言
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
const locale = zhCN
</script>

<template>
  <a-config-provider :locale="locale">
    <header class="app-header">
      <div class="app-wrapper">
        <nav class="nav-links">
          <RouterLink to="/" exact-active-class="active-link">项目日程维度</RouterLink>
          <RouterLink to="/list" exact-active-class="active-link">项目列表维度</RouterLink>
          <RouterLink to="/visualization" exact-active-class="active-link">项目可视化</RouterLink>
        </nav>
      </div>
    </header>
    <!-- 页面主内容区域 -->
    <main class="main-content">
      <RouterView />
    </main>
  </a-config-provider>
</template>

<style scoped lang="less">
html,body{
  overflow-y: scroll;
}
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;               /* ← 使 header 成为 flex 容器 */
  justify-content: center;     /* ← 子元素水平居中 */
  align-items: center;         /* ← 子元素垂直居中 */
  z-index: 1000;
}

.app-wrapper {
  width: 100%;
  max-width: 1200px;           /* ← 限制最大宽度 */
  padding: 0 16px;             /* ← 两侧内边距 */
  box-sizing: border-box;
  display: flex;               /* ← 同样设为 flex */
  justify-content: center;     /* ← 让 nav 在容器中居中 */
  align-items: center;
}

.main-content {
  padding-top: 60px; /* 避免内容被 header 遮挡 */
  // max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  // display: flex;
  // align-items: center;
  // justify-content: center;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-size: 14px;
  a {
    color: #333;
    text-decoration: none;
    padding: 8px 16px;
    transition:
      color 0.3s,
      border-bottom 0.3s;
    .active-link {
      font-weight: bold;
      color: #1890ff;
      border-bottom: 2px solid #1890ff;
    }
  }
}

/* @media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
} */
</style>
